<template>
  <div class="backView">

    <div v-if="dataList" v-for="el in dataList" @click="pickUp(el)" class="itemView">

      <img class="iconView" src="../../../../../../static/img/course_word_accessory.png"/>
      <div class="lineView"></div>
      <p class="titleLabel ellipsis2">
        {{ el.title }}
      </p>
    </div>

  </div>
</template>

<script>
export default {
  props: ['dataList', 'courseDetail'],
  data() {
    return {
      fileData: {}
    };
  },
  created() {
    window['mediaPrePlayNativeCallback'] = (jsonStr = '{}') => this.mediaPrePlayNativeCallback(jsonStr);
    window['mediaPlayPayDoneCallback'] = (jsonStr = '{}') => this.mediaPlayPayDoneCallback(jsonStr);
  },
  methods: {
    pickUp(el) {
      this.fileData = el;
      //后台返回不为空，就是可以看。
      if (!this.$store.getters['memberInfo/isOpen']) return this.$buyMemberPopup();

      this.requestNativeMethods('onJsPreparePlayingEUVideo', 'mediaPrePlayNativeCallback');
    },

    /**
     * 原生APP客户端回调
     * @param jsonStr code 0 已扣 1 未扣
     */
    mediaPrePlayNativeCallback(jsonStr) {
      let { code = '1', info } = JSON.parse(jsonStr);
      if (code * 1 === 0) return window.location.href = this.fileData.fileUrl;
      this.requestNativeMethods('onJsConfirmPlayingEUVideo', 'mediaPlayPayDoneCallback');
    },

    /**
     * 扣豆完成回调
     * @param jsonStr
     */
    mediaPlayPayDoneCallback(jsonStr) {
      let { code, info } = JSON.parse(jsonStr);
      if (code * 1 === 1) window.location.href = this.fileData.fileUrl;
    },

    /**
     * type 1:视频 2:音频  3:文档 4:测试
     * @param {string} execFn 执行方法
     * @param {string | undefined} callback 回调函数
     */
    requestNativeMethods(execFn, callback = undefined) {
      if (!execFn) throw new Error('execFn or callback can not be null');
      if (!window.hasOwnProperty('zshft')) return;
      const { title: subjectName, id: subjectId } = this.courseDetail;
      const { id: mediaId, title: mediaName } = this.fileData;
      let params = {
        subjectId,
        subjectName,
        mediaId,
        type: 3,
        mediaName
      };
      window.zshft[execFn](JSON.stringify(params), callback);
    },
  }
};
</script>

<style scoped>
.backView {
  padding: 16px 20px 16px 20px;
}

.itemView {
  display: flex;
  background: #F7F7F7;
  justify-content: flex-start;
  border-radius: 4px;
  align-items: center;
  height: 72px;
  width: 100%;
  margin-bottom: 16px;
}

.iconView {
  width: 50px;
  height: 50px;
  margin-left: 16px;
  object-fit: cover;
}

.lineView {
  width: 1px;
  height: 40px;
  margin-left: 18px;
  background-color: white;
}

.titleLabel {
  margin: 0 24px 0 16px;
  font-size: 14px;
  color: #333333;
}


</style>
